<template>
	<view class="pet-info-container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="left-btn" @click="goBack">
				<text class="iconfont"></text>
				<text class="back-text">返回</text>
			</view>
		</view>

		<!-- 宠物视频或图片展示 -->
		<view class="pet-media-display">
			<video v-if="petDetail.videoUrl"
				:src="petDetail.videoUrl"
				:poster="petDetail.images && petDetail.images.length > 0 ? petDetail.images[0] : '/static/default-video-poster.jpg'"
				controls
				class="pet-video-player">
			</video>
			<swiper v-else class="pet-swiper" :indicator-dots="true" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(image, index) in petDetail.images" :key="index">
					<view class="swiper-item">
						<image :src="image" mode="aspectFill"></image>
						<!-- 播放按钮 (如果需要，可以在这里为图片添加一个假播放按钮) -->
						<view class="play-btn" v-if="petDetail.videoUrl && index === 0">
							<text class="iconfont">&#xe600;</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 价格信息 -->
		<view class="price-section">
			<view class="price-main">
				<text class="price-symbol">¥</text>
				<text class="price-value">{{petDetail.price}}</text>
			</view>
			<view class="price-meta">
				<text class="original-price" v-if="petDetail.originalPrice">¥{{petDetail.originalPrice}}</text>
				<text class="sale-count">{{petDetail.saleCount}}人付款</text>
			</view>
		</view>

		<!-- 宠物标题 -->
		<view class="pet-title-section">
			<view class="title-content">
				<text class="pet-title">{{petDetail.title}}</text>
				<text class="pet-desc">{{petDetail.description}}</text>
			</view>
		</view>

		<!-- 优惠信息 -->
		<view class="promotion-section" v-if="petDetail.promotions && petDetail.promotions.length > 0">
			<view class="section-title">领券优惠</view>
			<view class="promotion-list">
				<view class="promotion-item" v-for="(item, index) in petDetail.promotions" :key="index">
					<view class="promotion-tag">{{item.tag}}</view>
					<view class="promotion-content">{{item.content}}</view>
				</view>
			</view>
		</view>

		<!-- 独家活动 -->
		<view class="activity-section" v-if="petDetail.activities && petDetail.activities.length > 0">
			<view class="section-title">独家活动</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(item, index) in petDetail.activities" :key="index">
					<text class="activity-tag">{{item.tag}}</text>
					<text class="activity-content">{{item.content}}</text>
					<text class="activity-more">详情 ></text>
				</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="shop-section">
			<view class="shop-info">
				<image class="shop-avatar" :src="petDetail.shop.avatar" mode="aspectFill"></image>
				<view class="shop-detail">
					<text class="shop-name">{{petDetail.shop.name}}</text>
					<view class="shop-rating">
						<text class="rating-score">{{petDetail.shop.rating}}</text>
						<text class="rating-label">宠物商会</text>
					</view>
				</view>
			</view>
			<view class="shop-btns">
				<button class="shop-btn">进店逛逛</button>
				<button class="shop-btn">查看资质</button>
			</view>
		</view>

		<!-- 买家评价 -->
		<view class="review-section">
			<view class="section-header">
				<text class="section-title">买家评价</text>
				<text class="section-more">查看全部 ></text>
			</view>
			<view class="review-list" v-if="petDetail.reviews && petDetail.reviews.length > 0">
				<view class="review-item" v-for="(review, index) in petDetail.reviews" :key="index">
					<view class="reviewer-info">
						<image class="reviewer-avatar" :src="review.avatar" mode="aspectFill"></image>
						<text class="reviewer-name">{{review.username}}</text>
					</view>
					<view class="review-content">
						<text class="review-text">{{review.content}}</text>
						<text class="review-time">{{review.time}}</text>
					</view>
				</view>
			</view>
			<view class="no-review" v-else>
				<text>暂无评价</text>
			</view>
		</view>

		<!-- 宠物详情 -->
		<view class="detail-section">
			<view class="section-header">
				<text class="section-title">宠物详情</text>
			</view>
			<view class="pet-attributes">
				<view class="attribute-item">
					<text class="attribute-label">性别</text>
					<text class="attribute-value">{{petDetail.gender === 'male' ? '公' : '母'}}</text>
				</view>
				<view class="attribute-item">
					<text class="attribute-label">年龄</text>
					<text class="attribute-value">{{petDetail.age}}</text>
				</view>
				<view class="attribute-item">
					<text class="attribute-label">疫苗</text>
					<text class="attribute-value">{{petDetail.vaccine ? '已接种' : '未接种'}}</text>
				</view>
				<view class="attribute-item">
					<text class="attribute-label">绝育</text>
					<text class="attribute-value">{{petDetail.sterilization === 'yes' ? '已绝育' : '未绝育'}}</text>
				</view>
				<view class="attribute-item">
					<text class="attribute-label">品种</text>
					<text class="attribute-value">{{petDetail.breed}}</text>
				</view>
				<view class="attribute-item">
					<text class="attribute-label">毛色</text>
					<text class="attribute-value">{{petDetail.color}}</text>
				</view>
			</view>
			<view class="detail-images" v-if="petDetail.detailImages && petDetail.detailImages.length > 0">
				<image v-for="(img, index) in petDetail.detailImages" :key="index" :src="img" mode="widthFix" class="detail-image"></image>
			</view>
		</view>

		<!-- 推荐宠物 -->
		<view class="recommend-section">
			<view class="section-header">
				<text class="section-title">猜你喜欢</text>
			</view>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item, index) in petDetail.recommendations" :key="index" @click="viewPetDetail(item.id)">
					<image class="recommend-image" :src="item.image" mode="aspectFill"></image>
					<text class="recommend-price">¥{{item.price}}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-icons">
				<view class="icon-item" @click="goToHome">
					<text class="iconfont">🏠</text>
					<text class="icon-text">首页</text>
				</view>
				<view class="icon-item" @click="goToCart">
					<text class="iconfont">🛒</text>
					<text class="icon-text">购物车</text>
					<text class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</text>
				</view>
				<view class="icon-item" @click="toggleFavorite">
					<text class="iconfont" :class="{ 'favorite-active': isFavorite }">{{ isFavorite ? '❤️' : '🤍' }}</text>
					<text class="icon-text">收藏</text>
				</view>
			</view>
			<view class="action-buttons">
				<view class="action-btn add-cart" @click="addToCart">加入购物车</view>
				<view class="action-btn buy-now" @click="buyNow">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { petApi, getAllPetVideos } from '../../src/api/pet.js';
	import { cartApi } from '../../src/api/cart.js';

	export default {
		data() {
			return {
				petId: null,
				petDetail: {
					id: '',
					title: '加载中...',
					description: '',
					price: 0,
					originalPrice: 0,
					saleCount: 0,
					images: [],
					videoUrl: '',
					gender: '',
					age: '',
					vaccine: false,
					sterilization: '',
					breed: '',
					color: '',
					promotions: [],
					activities: [],
					shop: {},
					reviews: [],
					detailImages: [],
					recommendations: []
				},
				cartCount: 0,
				isFavorite: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.petId = options.id;
				this.loadPetDetail();
				this.getCartCount();
				this.checkFavorite();
			} else {
				uni.showToast({
					title: '宠物ID不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			loadPetDetail() {
				uni.showLoading({
					title: '加载中...'
				});

				petApi.getPetById(this.petId)
					.then(res => {
						if(res && res.code === 200 && res.data) {
							Object.assign(this.petDetail, res.data);
							this.checkRelatedVideo();
						} else {
							uni.showToast({
								title: res?.message || '获取宠物详情失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('获取宠物详情失败:', err);
						uni.showToast({
							title: '网络异常，获取宠物详情失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});

				console.log('加载宠物ID:', this.petId);
			},
			goBack() {
				uni.navigateBack();
			},
			viewPetDetail(id) {
				uni.navigateTo({
					url: `/pages/pet/pet-info?id=${id}`
				});
			},
			goToConsult() {
				uni.navigateTo({
					url: '/pages/consult/index'
				});
			},
			async checkRelatedVideo() {
				try {
					const response = await getAllPetVideos();
					if (response && response.code === 200 && response.data) {
						const relatedVideo = response.data.find(video => 
							video.name === this.petDetail.title || 
							video.breed === this.petDetail.breed
						);
						
						if (relatedVideo) {
							this.petDetail.videoUrl = this.getVideoUrl(relatedVideo.avatar);
							console.log('找到关联视频:', this.petDetail.videoUrl);
						} else {
							this.petDetail.videoUrl = '';
							console.log('未找到关联视频');
						}
					} else {
						console.log('获取宠物视频列表失败或无数据', response);
						this.petDetail.videoUrl = '';
					}
				} catch (error) {
					console.error('获取宠物视频列表异常:', error);
					this.petDetail.videoUrl = '';
				}
			},
			getVideoUrl(avatar) {
				if (!avatar) return '';
				
				if (avatar.startsWith('http')) {
					console.log('Video URL (absolute):', avatar);
					return avatar;
				}
				
				const fullUrl = 'http://localhost:8081' + avatar;
				console.log('Video URL (relative processed):', fullUrl);
				return fullUrl;
			},
			getVideoThumbnail(pet) {
				if (pet.img) return pet.img;
				
				const breedImageMap = {
					'金毛': '/static/breeds/golden.jpg',
					'英短': '/static/breeds/british-shorthair.jpg',
					'拉布拉多': '/static/breeds/labrador.jpg',
					'美短': '/static/breeds/american-shorthair.jpg',
					'柯基': '/static/breeds/corgi.jpg',
					'泰迪': '/static/breeds/teddy.jpg',
					'金鱼': '/static/breeds/guinea-pig.jpg',
					'仓鼠': '/static/breeds/hamster.jpg'
				};

				return breedImageMap[pet.breed] || '/static/dog.png';
			},
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				});
			},
			toggleFavorite() {
				this.isFavorite = !this.isFavorite;
				uni.showToast({
					title: this.isFavorite ? '已收藏' : '取消收藏',
					icon: 'none'
				});
			},
			addToCart() {
				this.cartCount++;
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				});
			},
			buyNow() {
				uni.showToast({
					title: '立即购买功能待完善',
					icon: 'none'
				});
			},
			getCartCount() {
				this.cartCount = Math.floor(Math.random() * 5);
			},
			checkFavorite() {
				this.isFavorite = Math.random() > 0.5;
			}
		}
	}
</script>

<style lang="scss">
$theme-color: #FF6600;
$theme-color-light: rgba(255, 102, 0, 0.1);
$primary-color: #5C4033;
$secondary-color: #A1887F;
$text-primary-color: #333333;
$text-secondary-color: #666666;
$card-bg-color: #FFFFFF;
$page-bg-color: #F5F5F5;
$border-radius: 16rpx;
$shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

.pet-info-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: $page-bg-color;
	padding-bottom: 100rpx;
}

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 90rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: transparent;
	
	.left-btn {
		display: flex;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 30rpx;
		height: 60rpx;
		padding: 0 20rpx 0 10rpx;
		color: #fff;
		font-size: 28rpx;
		
		.iconfont {
			font-size: 36rpx;
			margin-right: 10rpx;
		}
	}
}

.pet-media-display {
	width: 100%;
	height: 750rpx;
	position: relative;
	overflow: hidden;
	
	.pet-video-player,
	.pet-swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			font-size: 60rpx;
			color: #fff;
		}
	}
}

.price-section,
.pet-title-section,
.promotion-section,
.activity-section,
.shop-section,
.review-section,
.detail-section,
.recommend-section {
	background-color: $card-bg-color;
	border-radius: $border-radius;
	margin: 20rpx 30rpx;
	padding: 30rpx;
	box-shadow: $shadow;
}

.price-section {
	display: flex;
	flex-direction: column;
	
	.price-main {
		display: flex;
		align-items: baseline;
		margin-bottom: 10rpx;
		
		.price-symbol {
			font-size: 36rpx;
			color: $theme-color;
			font-weight: bold;
		}
		.price-value {
			font-size: 60rpx;
			color: $theme-color;
			font-weight: bold;
			margin-right: 20rpx;
		}
		.price-market {
			font-size: 28rpx;
			color: $text-secondary-color;
			text-decoration: line-through;
		}
	}
	
	.price-meta {
		font-size: 24rpx;
		color: $text-secondary-color;
		
		.original-price {
			margin-right: 20rpx;
		}
	}
}

.pet-title-section {
	.pet-title {
		font-size: 38rpx;
		font-weight: bold;
		color: $text-primary-color;
		line-height: 1.4;
		margin-bottom: 15rpx;
	}
	.pet-desc {
		font-size: 28rpx;
		color: $text-secondary-color;
		line-height: 1.6;
	}
}

.promotion-section {
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $text-primary-color;
		margin-bottom: 20rpx;
	}
	.promotion-list {
		display: flex;
		flex-wrap: wrap;
		
		.promotion-item {
			display: flex;
			align-items: center;
			background-color: $theme-color-light;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			margin-bottom: 15rpx;
			
			.promotion-tag {
				font-size: 24rpx;
				color: $theme-color;
				font-weight: bold;
				margin-right: 15rpx;
			}
			.promotion-content {
				font-size: 26rpx;
				color: $text-primary-color;
			}
		}
	}
}

.activity-section {
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $text-primary-color;
		margin-bottom: 20rpx;
	}
	.activity-list {
		.activity-item {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			&:last-child {
				margin-bottom: 0;
			}
			
			.activity-tag {
				font-size: 24rpx;
				color: $theme-color;
				border: 1rpx solid $theme-color;
				border-radius: 8rpx;
				padding: 4rpx 12rpx;
				margin-right: 15rpx;
			}
			.activity-content {
				flex: 1;
				font-size: 28rpx;
				color: $text-primary-color;
			}
			.activity-more {
				font-size: 24rpx;
				color: $text-secondary-color;
				margin-left: 15rpx;
			}
		}
	}
}

.shop-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.shop-info {
		display: flex;
		align-items: center;
		
		.shop-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			border: 2rpx solid #f5f5f5;
			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		}
		.shop-detail {
			.shop-name {
				font-size: 32rpx;
				font-weight: bold;
				color: $text-primary-color;
				margin-bottom: 8rpx;
			}
			.shop-rating {
				display: flex;
				align-items: center;
				.rating-score {
					font-size: 28rpx;
					color: $theme-color;
					font-weight: bold;
					margin-right: 10rpx;
				}
				.rating-label {
					font-size: 24rpx;
					color: $text-secondary-color;
					background-color: #F0E4DE;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
	
	.shop-btns {
		display: flex;
		.shop-btn {
			background-color: #F0E4DE;
			color: $primary-color;
			font-size: 26rpx;
			border-radius: 30rpx;
			padding: 15rpx 30rpx;
			margin-left: 20rpx;
			line-height: 1;
			&::after {
				border: none;
			}
		}
	}
}

.review-section {
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $text-primary-color;
		}
		.section-more {
			font-size: 26rpx;
			color: $text-secondary-color;
		}
	}
	
	.review-list {
		.review-item {
			margin-bottom: 30rpx;
			&:last-child {
				margin-bottom: 0;
			}
			
			.reviewer-info {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				.reviewer-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.reviewer-name {
					font-size: 28rpx;
					color: $text-primary-color;
					font-weight: bold;
				}
			}
			.review-content {
				.review-text {
					font-size: 28rpx;
					color: $text-primary-color;
					line-height: 1.5;
					display: block;
					margin-bottom: 10rpx;
				}
				.review-time {
					font-size: 22rpx;
					color: $text-secondary-color;
				}
			}
		}
	}
	.no-review {
		text-align: center;
		font-size: 28rpx;
		color: $text-secondary-color;
		padding: 30rpx 0;
	}
}

.detail-section {
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $text-primary-color;
		}
	}
	
	.pet-attributes {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
		
		.attribute-item {
			display: flex;
			align-items: center;
			width: 50%;
			margin-bottom: 15rpx;
			
			.attribute-label {
				font-size: 28rpx;
				color: $text-secondary-color;
				margin-right: 15rpx;
				white-space: nowrap;
			}
			.attribute-value {
				font-size: 28rpx;
				color: $text-primary-color;
				font-weight: bold;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	.detail-images {
		display: flex;
		flex-direction: column;
		
		.detail-image {
			width: 100%;
			height: auto;
			border-radius: $border-radius;
			margin-bottom: 20rpx;
		}
	}
}

.recommend-section {
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $text-primary-color;
		}
	}
	
	.recommend-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.recommend-item {
			background-color: #F8F8F8;
			border-radius: $border-radius;
			overflow: hidden;
			text-align: center;
			padding-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
			
			.recommend-image {
				width: 100%;
				height: 250rpx;
				object-fit: cover;
				margin-bottom: 15rpx;
			}
			.recommend-price {
				font-size: 32rpx;
				color: $theme-color;
				font-weight: bold;
			}
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #f5f5f5;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	z-index: 99;

	.action-icons {
		display: flex;
		align-items: center;
		flex: 1;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 80rpx;
			position: relative;
			color: #666;
			font-size: 20rpx;

			.iconfont {
				font-size: 40rpx;
				margin-bottom: 5rpx;
				&.favorite-active {
					color: #FF6600;
				}
			}
			.icon-text {
				font-size: 20rpx;
				color: #666;
			}
			.cart-badge {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				background-color: #FF6600;
				color: #fff;
				font-size: 18rpx;
				min-width: 30rpx;
				height: 30rpx;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 6rpx;
				transform: scale(0.8);
				transform-origin: center;
			}
		}
	}

	.action-buttons {
		display: flex;
		flex: 1.5;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;

		.action-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			&.add-cart {
				background-color: #FF9900;
			}
			&.buy-now {
				background-color: #FF6600;
			}
		}
	}
}
</style> 